<template>
  <div class="page-content company-center">
    <div class="page-title">企业中心</div>
    <div class="content-box">
      <div class="company-info-line clearfix">
        <div class="front fl">企业编号：</div>
        <div class="behind fl">{{ companyInfo.code }}</div>
      </div>
      <div class="company-info-line clearfix">
        <div class="front fl">登录手机号：</div>
        <div class="behind fl">{{ companyInfo.userPhone }}</div>
      </div>
      <div class="btn-grounp">
        <div class="btn fl" @click="changePhone = true">修改手机号</div>
        <div class="btn fl" @click="changePsw = true">修改密码</div>
      </div>
    </div>
    <a-modal
      v-model="changePhone"
      class="add-job-modal"
      centered
      destroyOnClose
      :width="600"
      title="修改手机号"
      @ok="PhoneOk"
    >
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">登录手机号：</span>
        </div>
        <div class="input-box fl">
          <input type="text" v-model="userPhone" placeholder="请输入手机号" maxlength="11" />
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model="changePsw"
      class="add-job-modal"
      centered
      :width="620"
      title="修改密码"
      @ok="PswOk"
    >
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">旧密码：</span>
        </div>
        <div class="input-box fl">
          <input type="password" placeholder="请输入" v-model="oldPwd" />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">新密码：</span>
        </div>
        <div class="input-box fl">
          <input type="password" placeholder="请输入" v-model="newPwd" />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">确认新密码：</span>
        </div>
        <div class="input-box fl">
          <input type="password" placeholder="请输入" v-model="rePwd" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      changePhone: false,
      changePsw: false,
      userPhone: "",
      oldPwd: "",
      newPwd: "",
      rePwd: ""
    };
  },
  computed: {
    companyInfo() {
      return this.$store.state.companyInfo;
    }
  },
  created() {
    this.getCompanyInfo().then((res) => {
      if(res.success){
        this.userPhone = res.model.userPhone;
      }else {
        this.$message.error(res.message)
      }
    });
  },
  methods: {
    ...mapActions(["getCompanyInfo"]),
    PhoneOk() {
      this.$http
        .put("/users/new-phone", { phone: this.userPhone })
        .then((res) => {
          if (res.success) {
            this.getCompanyInfo();
            this.changePhone = false;
            this.$message.success("修改成功");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.error("修改失败");
        });
    },
    PswOk() {
      this.$http
        .put("/users/passwords", {
          oldPwd: this.oldPwd,
          newPwd: this.newPwd,
          rePwd: this.rePwd,
          sysType: this.$config.sysType
        })
        .then((res) => {
          if (res.success) {
            this.getCompanyInfo();
            this.changePsw = false;
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败" + res.message);
          }
        })
        .catch(() => {
          this.$message.error("修改失败");
        });
    }
  }
};
</script>

<style lang="less"></style>
